<template>
  <view class="square">
    <!-- 顶部轮播 -->
    <swiper
      class="swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      @change="onSwiperChange"
      @tap="handleSwiperClick"
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <image class="swiper-img" :src="item" mode="aspectFill" />
      </swiper-item>
    </swiper>

    <!-- 活动分类 -->
    <view class="tabs">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :class="{ 'tab-active': activeTab === tab.name }"
        @click="activeTab = tab.name"
      >
        {{ tab.title }}
      </view>
    </view>

    <!-- 活动列表 -->
    <view class="post-list">
      <view
        v-for="(post, index) in postList"
        :key="index"
        class="post-item"
        @click="navigateToPostDetail(post.id)"
      >
        <view class="post-header">
          <view class="user-info">
            <image class="avatar" :src="post.avatar || 'https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png'" mode="aspectFill" />
            <view class="user-name-time">
              <view class="user-name">{{ post.userName }}</view>
              <view class="post-time">{{ post.publishTime }}</view>
            </view>
          </view>
          <view v-if="post.tag" class="post-tag">{{ post.tag }}</view>
        </view>
        <view class="post-content">
          <view class="post-title">{{ post.title }}</view>
          <view class="post-summary">{{ post.content }}</view>
          <view v-if="post.images && post.images.length > 0" class="post-images">
            <image
              v-for="(img, imgIndex) in post.images.slice(0, 6)"
              :key="imgIndex"
              :src="img.replace(/\\/g, '/')"
              mode="aspectFill"
              class="post-image"
              @click.stop="previewImage(post.images, imgIndex)"
            />
            <view v-if="post.images.length > 6" class="more-images">
              +{{ post.images.length - 6 }}
            </view>
          </view>
        </view>
        <!-- <view class="post-footer">
          <view class="action-item">
            <wd-icon name="chat" size="18" color="#666" />
            <text>{{ post.commentCount || 0 }}</text>
          </view>
          <view class="action-item">
            <wd-icon
              :name="post.isLiked ? 'heart-filled' : 'heart'"
              :color="post.isLiked ? '#ff4d4f' : '#666'"
              size="18"
            />
            <text>{{ post.likeCount || 0 }}</text>
          </view>
          <view class="action-item">
            <wd-icon
              :name="post.isStarred ? 'star-filled' : 'star'"
              :color="post.isStarred ? '#ffb800' : '#666'"
              size="18"
            />
            <text>{{ post.starCount || 0 }}</text>
          </view>
        </view> -->
      </view>
    </view>

    <!-- 发布按钮 -->
    <!-- <view class="publish-btn" @click="navigateToPublish">
      <wd-icon name="add" size="18px" color="#fff" />
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

// 轮播图相关
const current = ref<number>(0);
const swiperList = ref(["https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/0a345d867e234edca9048c330a16887b.png"]);

// 标签页相关
const tabs = [
  { title: "推荐", name: "recommend" },
  { title: "活动", name: "activity" },
  { title: "话题", name: "topic" },
  { title: "公告", name: "announcement" },
];
const activeTab = ref("recommend");

// 帖子列表数据
const postList = ref([
  {
    id: "1",
    userName: "李家族长",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
    publishTime: "2小时前",
    tag: "活动",
    title: "2024年李氏家族线下家族分享会",
    content:
      "《陇西荟》可筹办多彩线下家族聚会，深化成员情谊，促进宗亲深度交流。同时，举办产品分享盛会，既为企业拓宽宣传渠道，又助宗亲学习养生之道，有效提升用户黏性，共筑美好时光。欢迎各位宗亲积极参与。活动地点：博阳李家，活动时间：上午9点。",
    images: ["https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/0a345d867e234edca9048c330a16887b.png"],
    commentCount: 28,
    likeCount: 56,
    isLiked: false,
    starCount: 12,
    isStarred: false,
  },
  {
    id: "2",
    userName: "李文化",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
    publishTime: "昨天",
    tag: "话题",
    title: "关于整理李氏家谱的建议",
    content:
      "作为家族的新一代成员，我认为我们应该利用数字化手段来保存和传承我们的家族历史。我提议建立一个数字档案库，收集老一辈的口述历史和照片...",
    images: [],
    commentCount: 45,
    likeCount: 120,
    isLiked: true,
    starCount: 35,
    isStarred: true,
  },
  {
    id: "3",
    userName: "李宗祠管理员",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/d560fd508cce44b5af0f7cc0e140b9e6.jpg",
    publishTime: "3天前",
    tag: "公告",
    title: "宗祠修缮工程进展通告",
    content: "宗祠东侧屋顶修缮工程已完成80%，预计下周完工。感谢各位宗亲的捐赠和支持！",
    images: [
      "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/bcc4123c1a9244b680206199766526ee.png",
      "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/bcc4123c1a9244b680206199766526ee.png",
      "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/7516550033a54fccbe29dc188f10d6cb.png",
      "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/149c74decc0d484881aea80536c9d812.png",
      "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/f321ed052dd64f19967b6c2ac0a56322.png",
      "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/e0649c0ee468460abcb23f88d33fb3b1.png",
      "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/7107e482a62d4fe7a74b11ad5a3ec6c3.png",
    ],
    commentCount: 15,
    likeCount: 87,
    isLiked: false,
    starCount: 20,
    isStarred: false,
  },
]);

// 轮播图变更
function onSwiperChange(e: any) {
  current.value = e.detail.current;
}

// 点击轮播图
function handleSwiperClick() {
  console.log("轮播图点击", current.value);
}

// 跳转到帖子详情
function navigateToPostDetail(id: string) {
  uni.navigateTo({
    url: `/pages/square/post-detail?id=${id}`,
  });
}

// 预览图片
function previewImage(images: string[], current: number) {
  // 修复图片路径中的反斜杠问题
  const fixedImages = images.map((img) => img.replace(/\\/g, "/"));

  uni.previewImage({
    urls: fixedImages,
    current: fixedImages[current],
  });
}

// 跳转到发布页面
function navigateToPublish() {
  uni.navigateTo({
    url: "/pages/square/publish",
  });
}

onMounted(() => {
  // 加载帖子数据
  // TODO: 从服务器获取帖子列表数据
});
</script>

<style lang="scss">
.square {
  padding-bottom: 100rpx;

  .swiper {
    height: 350rpx;
    width: 100%;
  }

  .swiper-img {
    width: 100%;
    height: 100%;
  }

  .tabs {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .tab-item {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    position: relative;
  }

  .tab-active {
    color: #3b8dff;
  }

  .tab-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 4rpx;
    background-color: #3b8dff;
    border-radius: 2rpx;
  }

  .post-list {
    padding: 20rpx;
  }

  .post-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 10rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
  }

  .user-info {
    display: flex;
    align-items: center;
  }

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 16rpx;
  }

  .user-name {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
  }

  .post-time {
    font-size: 24rpx;
    color: #999;
    margin-top: 4rpx;
  }

  .post-tag {
    font-size: 24rpx;
    color: #3b8dff;
    background-color: rgba(59, 141, 255, 0.1);
    padding: 4rpx 16rpx;
    border-radius: 30rpx;
  }

  .post-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 12rpx;
    color: #333;
  }

  .post-summary {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 16rpx;
  }

  .post-images {
    display: flex;
    flex-wrap: wrap;
    margin: 16rpx 0;
    position: relative;
  }

  .post-image {
    width: calc((100% - 20rpx) / 3);
    height: 220rpx;
    margin-right: 10rpx;
    margin-bottom: 10rpx;
    border-radius: 8rpx;
    object-fit: cover;
  }

  .post-image:nth-child(3n) {
    margin-right: 0;
  }

  .more-images {
    position: absolute;
    right: 10rpx;
    bottom: 10rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24rpx;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
  }

  .post-footer {
    display: flex;
    justify-content: space-around;
    border-top: 1rpx solid #f0f0f0;
    padding-top: 16rpx;
    margin-top: 16rpx;
  }

  .action-item {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 26rpx;

    text {
      margin-left: 8rpx;
    }
  }

  .publish-btn {
    position: fixed;
    right: 40rpx;
    bottom: 120rpx;
    width: 100rpx;
    height: 100rpx;
    background-color: #3b8dff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 16rpx rgba(59, 141, 255, 0.4);
  }
}
</style>
